
<template>
  <div class="list">
    <div v-if="list.length > 0">
      <div class="item" v-for="(item, index) in list" :key="index">
        <router-link
          class="link"
          :to="{
            name: 'detail',
            params: { id: item._id },
            query: { title: item.title },
          }"
        >
          <div class="item-box">
            <div class="line">
              <div class="name center" v-if="item.userInfo">
                <van-icon name="user-o" />
                {{ item.userInfo.username }}
              </div>
              <div class="date center">
                入职时间:
                <span>{{ item.time | timeFormat(true) }}</span>
              </div>
            </div>
            <div class="title mt5 row">
              offer名称:<span>{{ item.name }}</span>
            </div>
            <div class="title mt5 row">
              公司名称:<span>{{ item.company }}</span>
            </div>
            <div class="title mt5 row">
              入职薪资:<span>{{ item.salary }}</span>
            </div>
            <div class="title mt5 row">
              入职提醒:<span>{{ item.tips }}</span>
            </div>
            <div class="imgs mt5 row">
              <p v-if="item.desc">offer照片:</p>
              <div class="mt5" v-if="item.desc">
                <img
                  src="bigimg"
                  v-lazy="
                    GridItem.DecompressionStream.replace(/public/, baseURL)
                  "
                  alt=""
                />
              </div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <div class="empty mt20" v-else>
      <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="暂无任何OFFER记录"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: ["list", "type", "noques"],
  data() {
    return {};
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped >
.title,
.campany,
.address {
  color: #000;
  font-size: 16px;
  font-weight: 500;
}
.audio {
  background: #fff;
  padding: 8px;
  display: flex;
  justify-content: center;
}
.actions {
  border-top: 0.5px solid #ddd;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 10px;
}
.imgs {
  min-height: 30px;
  .sbox {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .simg {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    margin: 0px 10px 10px 0;
  }
  .bigimg {
    width: 100%;
    height: 300px;
    border-radius: 10px;
  }
}
.tag {
  margin: 3px 3px 0 0;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.list {
  padding: 0px 15px 15px;
  .item {
    margin-top: 20px;
    background: #f4f4f4;
    border-radius: 10px;
    padding: 10px;

    .link {
      color: #666;
      .line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 0.5px solid #ddd;
        padding-bottom: 5px;
      }
      .name {
        font-weight: 600;
      }
      .row {
        .icon {
          margin-right: 4px;
        }
      }
    }
  }
}
</style>
